import {
  PauseCircleOutlined,
  PlayCircleOutlined,
  StepBackwardOutlined,
  StepForwardOutlined,
} from '@ant-design/icons';
import { IBaseProps } from '@app-nextmesh/components/Forms/components/types';
import { Col, InputNumber, Row, Select, Slider, Tooltip } from 'antd';
import { CSSProperties, useEffect, useRef, useState } from 'react';
import { FrameAnimation, ICallbackData, IFrameData } from './animation';

interface IAnimationUiProps extends IBaseProps<number> {
  totalFrame: number;
}

export default function AnimationUi({
  disabled,
  totalFrame,
  onChange,
}: IAnimationUiProps) {
  const frameAnimation = useRef<FrameAnimation>(new FrameAnimation());

  const [isPlaying, setIsPlaying] = useState<boolean>(false);
  const [frameData, setFrameData] = useState<IFrameData>({
    totalFrame: 0, // 总的帧数
    currentFrame: 0, // 帧编号
    timePerFrame: 0.5, // 每帧显示时间
    repeat: '关', // 是否重复
    time: 0, // 时间展示
    gap: 1, // 间隙
    iterations: 1, // 迭代次数
  });
  useEffect(() => {
    setFrameData({
      ...frameData,
      totalFrame: totalFrame - 1, // 帧是从0开始的，所以这里减1
    });
  }, [totalFrame]);
  const iconDisabledStyle: CSSProperties =
    isPlaying || disabled
      ? {
          fontSize: '22px',
          pointerEvents: 'none',
          color: 'rgba(0, 0, 0, 0.25)',
        }
      : { fontSize: '22px' };

  // 动画控制器返回值
  const onChangCallback = async (isPlaying: boolean, value: ICallbackData) => {
    setFrameData({
      ...frameData,
      ...value,
      currentFrame: value.currentFrame,
    });
    setIsPlaying(isPlaying);

    onChange(value.currentFrame);
  };

  const onChangRendering = (currentFrame: number) => {
    setFrameData({
      ...frameData,
      currentFrame: currentFrame,
    });

    onChange(currentFrame);
  };

  const marks = {
    0: '0',
    [frameData.totalFrame]: frameData.totalFrame.toString(),
  };

  const disabled2 = isPlaying || disabled;
  return (
    <div style={{ height: '350px' }}>
      <div style={{ height: '20px' }}>
        <Row style={{ marginLeft: '50px' }}>
          <Col span={8}>
            <Tooltip
              placement='bottomLeft'
              title={'上一帧'}>
              <StepBackwardOutlined
                disabled={disabled2}
                style={{ ...iconDisabledStyle }}
                onClick={() => {
                  const currentFrame = frameData.currentFrame - 1;
                  if (currentFrame >= 0) {
                    onChangRendering(currentFrame);
                  }
                }}
              />
            </Tooltip>
          </Col>
          <Col span={8}>
            {!isPlaying ? (
              <Tooltip
                placement='bottomLeft'
                title={'播放'}>
                <PlayCircleOutlined
                  disabled={disabled}
                  style={{ fontSize: '22px' }}
                  onClick={() => {
                    setIsPlaying(true);
                    frameAnimation.current.start(
                      {
                        ...frameData,
                      },
                      onChangCallback,
                    );
                  }}
                />
              </Tooltip>
            ) : (
              <Tooltip
                placement='bottomLeft'
                title={'停止'}>
                <PauseCircleOutlined
                  disabled={disabled}
                  style={{ fontSize: '22px' }}
                  onClick={() => {
                    setIsPlaying(false);
                    frameAnimation.current.stop();
                  }}
                />
              </Tooltip>
            )}
          </Col>
          <Col span={8}>
            <Tooltip
              placement='bottomLeft'
              title={'下一帧'}>
              <StepForwardOutlined
                disabled={disabled2}
                style={{ ...iconDisabledStyle }}
                onClick={() => {
                  const currentFrame = frameData.currentFrame + 1;
                  if (currentFrame <= frameData.totalFrame) {
                    onChangRendering(currentFrame);
                  }
                }}
              />
            </Tooltip>
          </Col>
        </Row>
      </div>
      <div style={{ height: '140px' }}>
        <Row style={{ marginBottom: '10px', marginTop: '12px' }}>
          <Col span={6}> 帧数:</Col>
          <Col span={18}>
            <InputNumber<number>
              style={{
                width: 200,
              }}
              value={frameData.totalFrame}
              min={0}
              max={frameData.totalFrame}
              onChange={(value) => {
                setFrameData({
                  ...frameData,
                  totalFrame: value,
                });
              }}
              disabled={disabled2}
              checked={true}
              stringMode
            />
          </Col>
        </Row>
        <Row>
          <Col span={6}>帧编号:</Col>
          <Col span={18}>
            <InputNumber<number>
              style={{
                width: 200,
              }}
              value={frameData.currentFrame}
              min={0}
              max={frameData.totalFrame}
              onChange={(value) => {
                if (value !== null) {
                  onChangRendering(value);
                }
              }}
              disabled={disabled2}
              checked={true}
              stringMode
            />
          </Col>
        </Row>
        <Slider
          min={0}
          disabled={disabled2}
          max={frameData.totalFrame}
          value={frameData.currentFrame}
          marks={marks}
          onChange={(value) => {
            onChangRendering(value);
          }}
        />
        <Row>
          <Col span={4}>时间:</Col>
          <Col span={20}>{frameData.time.toFixed(4)}</Col>
        </Row>
      </div>
      <div style={{ height: '70px' }}>
        <Row style={{ marginBottom: '10px', marginTop: '15px' }}>
          <Col span={8}>每帧显示时间:</Col>
          <Col span={16}>
            <InputNumber<number>
              style={{
                width: 200,
              }}
              value={frameData.timePerFrame}
              min={0}
              onChange={(value) => {
                setFrameData({
                  ...frameData,
                  timePerFrame: value,
                });
              }}
              disabled={disabled2}
              checked={true}
              stringMode
              addonAfter='s'
            />
          </Col>
        </Row>
        <Row>
          <Col span={8}>重复:</Col>
          <Col span={16}>
            <Select
              value={frameData.repeat}
              style={{
                width: 200,
              }}
              onChange={(value) => {
                setFrameData({
                  ...frameData,
                  repeat: value,
                });
              }}
              disabled={disabled2}
              options={[
                { value: '关', label: '关' },
                { value: '永远', label: '永远' },
                { value: '迭代次数', label: '迭代次数' },
              ]}
            />
          </Col>
        </Row>
        {frameData.repeat === '迭代次数' && (
          <Row style={{ marginTop: '15px' }}>
            <Col span={8}>迭代次数:</Col>
            <Col span={16}>
              <InputNumber<number>
                style={{
                  width: 200,
                }}
                value={frameData.iterations}
                min={1}
                max={25}
                disabled={disabled2}
                onChange={(value) =>
                  setFrameData({
                    ...frameData,
                    iterations: value,
                  })
                }
                checked={true}
                stringMode
              />
            </Col>
          </Row>
        )}
        <Row style={{ marginTop: '15px', marginBottom: '10px' }}>
          <Col span={8}>间隙:</Col>
          <Col span={16}>
            <InputNumber<number>
              style={{
                width: 200,
              }}
              value={frameData.gap}
              min={1}
              max={frameData.totalFrame}
              onChange={(value) => {
                setFrameData({
                  ...frameData,
                  gap: value,
                });
              }}
              disabled={disabled2}
              checked={true}
              stringMode
            />
          </Col>
        </Row>
      </div>
    </div>
  );
}
